<template>
	<view
		class="diy-video"
		:style="{
			padding:itemData.style.paddingTop + 'px 0rpx'
		}">
		<view 
			class="diy-video-box"
			:style="{
				height:(itemData.style.height * 2) + 'rpx'
			}">
			<!-- #ifdef APP-VUE -->
			<u-parse :content="
			`<video 
				src='${itemData.params.videoUrl}'
				poster='${itemData.params.poster}'
				${itemData.params.autoplay == 1 ? 'autoplay' : ''}
				webkit-playsinline
				x-webkit-airplay
				playsinlin
				class='uni-video-video'
				style='object-fit: contain; width: 100%;height: ${itemData.style.height * 2}rpx; background-color: rgba(1, 1, 1, 0.5);'>
			</video>`"></u-parse>
			<!-- #endif -->
			<!-- #ifndef APP-VUE -->
			<video
				:style="{
					height:(itemData.style.height * 2) + 'rpx'
				}"
				:src="itemData.params.videoUrl"
				:poster="itemData.params.poster"
				:autoplay="itemData.params.autoplay == '1'"
				controls
				:webkit-playsinline="true"
				:x-webkit-airplay="true"
				playsinlin
				objectFit="contain">
			</video>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ['itemData'],
		methods: {

		}
	}
</script>

<style>
	.diy-video{
		box-sizing: border-box;
		margin-bottom: 20rpx;
		font-size: 0;
	}
	.diy-video-box {
		position: relative;
	}
	.diy-video uni-video,
	.diy-video video {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		box-sizing: border-box;
		border-radius: 6rpx;
		z-index: 1;
	}
</style>
